<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高手班内容</title>
	</head>
	<style>
		body{
			width: 400px;
			font-size: 14px;
		}
		.title{
			text-align: center;/*文字横向居中*/
			font-size: 20px;
			color: red;
			font-weight: bold;
		}
		.subtitle{
			text-align: center;
			margin-top: 5px;
			font-size: 17px;
			font-weight: bold;/*字体加粗*/
		}
		.content1{
			background-color: cornflowerblue;
			margin-bottom: 5px;
			margin-top: 5px;
			padding-left:10px ;
			color: white;
			line-height: 27px;/*线高纵向居中效果*/
		}
		.content2{
			background-color: #FF0000;
			color: white;
			line-height: 27px;
		}
		.number{
			background-color: black;
			width: 20px;
			margin-left: 5px ;/*外面margin里面padding*/
			display: inline-table;/*展现,上下都占满*/
			text-align: center;
		}
	</style>
	<body>
		<div>
			<div class="title">高手班（升级加薪）</div>
			<div class="subtitle">第一部分:基础知识进阶</div>
			<div class="content1"><span class="number">1</span> 新接口规范、lambda表达式、Stream、新日期</div>
			<div class="content2"><span class="number">2</span>  多线程、并发安全、锁优化、高级集合、juc并发</div>
			<div class="content1"><span class="number">3</span>  NIO原理分析、并发安全、锁优化、高级集合、juc并发</div>
			<div class="content2"><span class="number">4</span>  手写类加载器、并发安全、锁优化、高级集合、juc并发</div>
		</div>
		<div>
			<div class="subtitle">第二部分:数据结构和算法</div>
			<div class="content1"><span class="number">5</span> 新接口规范、lambda表达式、Stream、新日期</div>
			<div class="content2"><span class="number">6</span>  多线程、并发安全、锁优化、高级集合、juc并发</div>
			<div class="content1"><span class="number">7</span>  NIO原理分析、并发安全、锁优化、高级集合、juc并发</div>
			<div class="content2"><span class="number">8</span>  手写类加载器、并发安全、锁优化、高级集合、juc并发</div>
		</div>
	</body>
</html>
